// vue 组件, 组件名不能用驼峰命名
// 该组件提供登录相关的基本界面元素,常用的操作
Vue.component("login",{
    template:`
    <span>
        <slot v-if="!myinfo" name="nologin" v-bind:v="visible">
            <a href="#" @click.prevent="visible.loginVisible=true">登录</a>
            <a href="#" @click.prevent="visible.regVisible=true">注册</a>
             <a href="#" @click.prevent="visible.forgetVisible=true">忘记密码</a>
        </slot>
        <slot v-else name="logined" v-bind:m="myinfo">
            <!-- TODO id 是临时用于测试的字段 -->
            欢迎 {{myinfo.id}}
            <a href="/logout">退出</a>
        </slot>
        <el-dialog title="登录窗口" :visible.sync="visible.loginVisible">
          <el-form>
            <el-form-item label="用户名" label-width="100px">
              <el-input v-model="login.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="100px">
              <el-input v-model="login.pwd" type="password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible.loginVisible = false">取 消</el-button>
            <el-button type="primary" @click="doLogin">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="注册窗口" :visible.sync="visible.regVisible">
          <el-form>
            <el-form-item label="用户名" label-width="100px">
              <el-input v-model="login.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="100px">
              <el-input v-model="login.pwd" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" label-width="100px">
              <el-input v-model="login.pwd" type="password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible.regVisible = false">取 消</el-button>
            <el-button type="primary" @click="">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="忘记密码窗口" :visible.sync="visible.forgetVisible">
          <el-form>
            <el-form-item label="用户名" label-width="100px">
              <el-input v-model="forget.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" label-width="100px">
              <el-input v-model="forget.vcode" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" label-width="100px">
              <el-input v-model="forget.pwd" type="password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible.forgetVisible = false">取 消</el-button>
            <el-button type="primary" @click="sendMail1">发送验证邮件1</el-button>
            <el-button type="primary" @click="sendMail2">发送验证邮件2</el-button>
            <el-button type="primary" @click="resetForgetPwd">修改密码</el-button>
          </div>
        </el-dialog>
    </span>
    `,
    props:["prefix"],
    // 组件内数据模型建议使用函数形式
    data(){
        return {
            myinfo:null,
            visible:{loginVisible: false,
                      regVisible:false,
                      resetVisible:false,
                      forgetVisible:false
            },
            login:{name:"",pwd:""},
            forget:{name:"",pwd:"",vcode:""}
        }
    },
    created(){
        axios.get(this.prefix + "/myInfo").then(res=>{
            if(res.data.code == 1){
                this.myinfo = res.data.data;
            } else {
                this.myinfo = null;
            }
        })
        if(location.search=="?tologin"){
            setTimeout(()=>{
                this.$alert("请先登录系统!");
            },100);
        }
    },
    methods:{
        doLogin(){
            let p = new URLSearchParams();
            p.append("name", this.login.name);
            p.append("pwd", this.login.pwd);
            axios.post(this.prefix + "/login",p).then(res=>{
                if(res.data.code == 1){
                    this.myinfo = res.data.data;
                    this.visible.loginVisible = false;
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        sendMail1(){
            axios.get(this.prefix + "/sendForgetMail?name="+this.forget.name).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        sendMail2(){
            axios.get(this.prefix + "/sendForgetMail?type=2&name="+this.forget.name).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        resetForgetPwd(){
            let p = new URLSearchParams();
            p.append("name", this.forget.name);
            p.append("pwd", this.forget.pwd);
            p.append("vcode", this.forget.vcode);
            axios.post(this.prefix + "/resetForgetPwd",p).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.visible.forgetVisible = false;
                } else {
                    this.$alert(res.data.msg);
                }
            })
        }
    }
})
